<template>
    <!-- 标签行区域 -->
    <el-tabs v-model="editableTabsValue" type="card" editable class="demo-tabs" @edit="handleTabsEdit">
        <!-- tab选中后才显示pane区域的内容 -->
        <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
            {{ item.content }}
        </el-tab-pane>
    </el-tabs>
    <p>{{ 'editableTabsValue:' + editableTabsValue }}</p>
    <p>{{ 'editableTabs个数:' + editableTabs.length }}</p>
</template>

<script setup>
import { ref } from 'vue'

// 新增的tab标签name，通过自增变化
let tabIndex = 2
// 选中标签的name属性
const editableTabsValue = ref('2')
// 标签数组
const editableTabs = ref([
    {
        title: '主页',
        name: 'default',
        content: 'Tab 1 content',
    },
    {
        title: '书籍管理',
        name: 'books',
        content: 'Tab 2 content',
    },
    {
        title: '文件列表',
        name: 'files',
        content: 'Tab 3 content',
    },
    {
        title: '实时天气',
        name: 'weathers',
        content: 'Tab 4 content',
    },
    {
        title: '用户管理',
        name: 'users',
        content: 'Tab 5 content',
    },
    {
        title: '角色管理',
        name: 'roles',
        content: 'Tab 6 content',
    },
    {
        title: '菜单管理',
        name: 'menus',
        content: 'Tab 7 content',
    },
    {
        title: '系统设置',
        name: 'settings',
        content: 'Tab 8 content',
    }
])

/**
 * 标签的增减
 * @param {*} targetName 目标tab的名称
 * @param {*} action 动作:add/remove
 */
const handleTabsEdit = (targetName, action) => {
    console.log(targetName)
    console.log(action)
    // 新增
    if (action === 'add') {
        // 产生新的标签名
        const newTabName = `${++tabIndex}`
        // 往数组中增加标签对象
        editableTabs.value.push({
            title: 'New Tab',
            name: newTabName,
            content: 'New Tab content',
        })
        // 选中新增的标签
        editableTabsValue.value = newTabName
    }
    // 移除
    else if (action === 'remove') {
        const tabs = editableTabs.value
        // 获取当前选中的标签name属性
        let activeName = editableTabsValue.value
        // 如果要移除的是当前选中的标签，需要额外处理
        if (activeName === targetName) {
            tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                    // 新的选中目标
                    // 1.如果存在下一个标签，选择后一个标签
                    // 2.如果当前选择并且删除的是末尾标签，选择前一个标签
                    const nextTab = tabs[index + 1] || tabs[index - 1]
                    if (nextTab) {
                        activeName = nextTab.name
                    }
                }
            })
        }
        // 从数组中移除
        editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
        // 重新选中目标标签
        editableTabsValue.value = activeName
    }
}
</script>

<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>